<template>
    <div class="app-container">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item>
              <el-select v-model="hospitalQueryVo.provinceCode" placeholder="请选择省" @change="provinceChanged">
                  <el-option v-for="item in provinceList" :key="item.id" :label="item.name" :value="item.id"/>
              </el-select>
          </el-form-item>
          <el-form-item>
              <el-select v-model="hospitalQueryVo.cityCode" placeholder="请选择市" @change="cityChanged">
                  <el-option v-for="item in cityList" :key="item.id" :label="item.name" :value="item.id"/>
              </el-select>
          </el-form-item>
          <el-form-item>
              <el-input v-model="hospitalQueryVo.hosname" placeholder="医院名称"/>
          </el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="getListHosp()">查询</el-button>
          <el-button type="default" @click="resetData()">清空</el-button>
        </el-form>

      <!-- banner列表 -->
      <el-table v-loading="hospListLoading" :data="hospList" style="width: 100%;z-index: 0" @selection-change="handleSelectionChange"  :cell-style="tableRowClassName"  :default-sort = "{prop: 'date', order: 'descending'}" fit highlight-current-row>
        <el-table-column type="index" width="80" align="center" label="序号"/>
        <el-table-column label="医院logo">
            <template slot-scope="scope">
              <img :src="'data:image/jpeg;base64,'+scope.row.logoData" width="80">
            </template>
        </el-table-column>

        <el-table-column prop="hosname" label="医院名称"/>
        <el-table-column prop="param.hostypeString" label="等级" width="90"/>
        <el-table-column prop="param.fullAddress" label="详情地址"/>
        <el-table-column label="状态" width="120">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.status===1"
                active-color="#13ce66"
                inactive-color="#ff4949"  @change="updateStatus(scope.row.id,scope.row.status)" />
              <el-tag type="success" v-if="scope.row.status===1">上线</el-tag>
              <el-tag type="danger" v-else>下线</el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间"/>
        <el-table-column label="操作" width="230" align="center">
          <template slot-scope="scope">
              <label class="btn btn-info active" style="margin-right:20px;">
                <router-link :to="'/hospSet/hospShow/'+scope.row.id">
                  <el-link type="primary"><i class="el-icon-view el-icon--right"></i>查看</el-link>
                </router-link>
              </label>
            <router-link :to="'/hospSet/schedule/'+scope.row.hoscode">
              <el-link type="info" icon="el-icon-share" >排班</el-link>
            </router-link>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <div class="block">
        <el-pagination align="center" style="margin-top:50px;width: 100%" @size-change="handleSizeChange"
                       @current-change="handleCurrentChange" :current-page="page" :page-sizes="[5, 10, 15, 20]"
                       :page-size="limit" :background="true" layout="total, sizes, prev, pager, next, jumper" :total="total"/>
      </div>
    </div>
</template>

<script>
import hospApi from "@/api/hosp";
import dictApi from "@/api/dict";
export default {
  name: 'List',
  data(){
    return{
      hospListLoading:true, //数据是否正在加载
      limit:5, //分页数
      page:1, //d当前页
      hospitalQueryVo:{}, //条件对象
      hospList:[], //医院信息集合
      total:0, //总记录数
      showModal: false,   // 是否显示模态框
      multipleSelection:[], //选中的记录
      provinceList:[], //省集合
      cityList:[]  //城市集合

    }
  },
  methods:{
    //获取医院信息列表
    getListHosp(page=1,limit=5){
      this.page = page;
      this.limit = limit;
      hospApi.getListHosp(this.page,this.limit,this.hospitalQueryVo)
        .then(request =>{
          this.hospList = request.data.content
          this.total = request.data.totalElements
          this.page = request.data.current
          this.limit = request.data.number+1
          //数据是否正在加载
          this.hospListLoading = false
        })
        .catch(error =>{
          this.$message.error('抱歉，获取医院信息列表失败，请与IT管理员联系');
        });
    },

    //根据dictCode查询下级节点
    findAllProvince(dictCode){
      dictApi.findByDictCode(dictCode)
      .then(result => {
        this.provinceList = result.data
      })
      .catch(error => {
        this.$message.error('抱歉，获取省列表失败，请与IT管理员联系');
      })
    },
    //点击某个生省，显示某个市
    provinceChanged(){
      //初始化
      this.cityList = []
      this.hospitalQueryVo.cityCode = null
      //调用方法 根据省id，查询下面的子节点
      dictApi.findChildData(this.hospitalQueryVo.provinceCode)
          .then(result => {
              this.cityList = result.data
          })
          .catch(error => {
            this.$message.error('抱歉，获取市列表失败，请与IT管理员联系');
          })
    },
    //根据上级id获取子节点数据列表
    cityChanged(id){
      dictApi.findChildData(id)
      .then(result => {
        this.cityList = result.data.data
      })
      .catch(error => {
        this.$message.error('抱歉，获取省列表失败，请与IT管理员联系');
      })
    },

    //修改医院设置状态
    updateStatus(id,status){
      if (status===1){
        hospApi.updateHospStatus(id,0)
          .then(request =>{
            if(request.code ===200 && request.message ==='成功'){
              this.$message({
                message: '恭喜你，修改成功，id为'+id+'的医院已经成功下线',
                type: 'success'
              });
              this.getListHosp(this.page,this.limit);
            }
          })
          .catch(error =>{
            this.$message.error('抱歉，修改失败，请与IT管理员联系');
          });
      }else {
        hospApi.updateHospStatus(id,1)
          .then(request =>{
            if(request.code ===200 && request.message ==='成功') {
              this.$message({
                message: '恭喜你，修改成功，id为' + id + '的医院已经成功上线',
                type: 'success'
              });
              this.getListHosp(this.page,this.limit);
            }
          })
          .catch(error =>{
            this.$message.error('抱歉，修改失败，请与IT管理员联系');
          });
      }
    },


    //根据id删除单挑医院设置信息
    removeHosp(id){
      this.$confirm('此操作将永久删除该医院信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        hospApi.removeHospSet(id)
          .then(request =>{
            if(request.code ===200 && request.message ==='成功') {
              this.$message({
                message: '恭喜你，删除成功，id为' + id + '的医院已经被删除了',
                type: 'success'
              });
              this.getListHosp(this.page,this.limit);
            }
          })
          .catch(error => {
            this.$message.error('抱歉，删除医院信息失败，请与IT管理员联系');
          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },

    //分页查询  通过当前页数展示条数
    handleSizeChange(size){
      this.getListHosp(this.page,size)
    },
    //分页查询  通过当前展示条数，切换页码
    handleCurrentChange(page){
      this.getListHosp(page,this.limit)
    },
    //根据状态显示不同的背景颜色
    tableRowClassName({row}) {
      if (row.status === 1) {
        return ' background: #E7F2E7';
      } else {
        return ' background: #FFF0F5';
      }
    },
    toggleModal:function(){
      this.showModal = !this.showModal;
    },
    closeme:function(){
      this.showModal = !this.showModal;
    },
    //获取选中行信息赋值给multipleSelection
    handleSelectionChange(rows) {
      this.multipleSelection = rows;
    },
    //清空查询条件
    resetData(){
      this.cityList = []
      this.provinceList = []
      this.hospitalQueryVo = {}
      this.findAllProvince('Province')
    }
  },
  created() {
    this.getListHosp(this.page,this.limit);
    this.findAllProvince('Province')
  }
}
</script>

<style scoped>

</style>
